<template>
  <div class="member-order">
    <XtxTabs v-model="activeName" @tabClick='handleClick'>
        <XtxTabsPanel
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        >
    </XtxTabsPanel>
     </XtxTabs>
    <!-- 列表项 -->
     <div class="order-list" >
      <div v-if="loading" class="loading"></div>
      <div class="none" v-if="!loading && orderList.length === 0">
      <img src="~@/assets/images/none.png" alt="" >
      <p>空空如也</p>
      </div>
      <OrderItem v-for="item in orderList" :key="item.id" :order="item" />
          <!-- 分页 -->
      <XtxPagination
      v-if="total > params.pageSize"
      @current-change="params.page=$event"
      :total="total"
      :page-size="params.pageSize"
      :current-page="params.page"  />
    </div>
  </div>
</template>
<script>
import OrderItem from './components/order-item'
import { findOrderList } from '@/api/order'
import { orderStatus } from '@/api/constants'
import { ref, reactive, watch } from 'vue'
export default {
  name: 'MemberOrder',
  components: { OrderItem },
  setup () {
    // tab默认
    const activeName = ref('all')
    // 加载状态
    const loading = ref(true)
    const total = ref(0)
    // 点tab后切换数据
    const handleClick = (val) => {
      // console.log(val)
      // val.index 就是订单的状态
      params.orderState = val.index
      params.page = 1
    }

    // 查询订单参数
    const params = reactive({
      page: 1, // 页码
      pageSize: 5, // 每页条数
      orderState: 0 // 订单状态，1为待付款、2为待发货、3为待收货、4为待评价、5为已完成、6为已取消，未传该参数或0为全部
    })
    // 订单列表
    const orderList = ref([])
    // 参数变化 重新加载数据
    watch(params, () => {
      loading.value = true
      // 查询订单
      findOrderList(params).then(({ result }) => {
        orderList.value = result.items
        // console.log(result)
        total.value = result.counts
        loading.value = false
      })
    }, { immediate: true })
    return { activeName, handleClick, orderStatus, orderList, loading, total, params }
  }
}
</script>
<style scoped lang="less">
.order-list {
  padding: 20px;
  position: relative;
  min-height: 400px;
  background: #fff;

}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.9) url(~@/assets/images/loading.gif) no-repeat center;
}
.none {
  height: 600px;
  color: #999;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
